import styles from './index.less'

import React, { useState, useEffect } from 'react';
import { connect } from 'umi'; // connect可以将models和view绑定

import Roles from './roles'; // useSelector, useDispatch也可以将models和view绑定


const Dva: React.FC = (props) => {

  const getPermissons = async () => {
    // 通过dispatch 调用文件下的save 改变dva 下 system 的 state的状态值
    let permissionList = [...props.userAuth.permissions]
    permissionList.push('check')
    props.dispatch({
      type: 'userAuth/addPermissions', // type，命名空间/reducers方法名
      payload: {
        permissions: permissionList// payload，参数
      }
    })
  };

  return (
    <div className='page-container'>
      <div className='scroll-container'>
        <div className={styles['step-container']}>
          <p>该示例是connect将models和view绑定，用reducers中的方法改变state数据</p>
          <p className={styles['link']} onClick={getPermissons}>点我添加用户check权限</p>
          <p>现有权限：{props.userAuth.permissions.join('，')}</p><br />

          <Roles></Roles>
        </div>
      </div>
    </div>
  );
};

// 建立组件与dva的连接
export default connect(({ userAuth }) => ({ userAuth }))(Dva);
